<template>
	<view class="home-container">
		<!-- 轮播图 -->
		<swiper class="swiper-list" :indicator-dots="true" :autoplay="true" circular :interval="3000" :duration="1000">
			<swiper-item v-for="item in bannerList" :key="item.bannerid">
				<image :src="item.img" mode=""></image>
			</swiper-item>
		</swiper>

		<!-- 菜单 -->
		<uni-grid class="grid-list" :column="5" :showBorder="false">
			<uni-grid-item class="grid-item" v-for="item in menuList" :key="item.id">
				<image :src="item.icon" mode=""></image>
				<text class="text">{{item.title}}</text>
			</uni-grid-item>
		</uni-grid>

		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="goods-item" v-for="item in goodsList" :key="item.proid" @click="goToDetail(item.proid)">
				<image :src="item.img2" mode=""></image>
				<view class="title">{{item.proname}}</view>
				<view class="desc">{{item.desc}}</view>
				<view class="price">￥{{format.formatPrice(item.originprice)}}</view>
			</view>
		</view>
		<uni-load-more class="footer" :status="status"
			:content-text="{contentdown: '上拉显示更多',contentrefresh: '拼老命加载中',contentnomore: '别拉了，没有辣'}"></uni-load-more>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { getBannerList, getGoodsList, getMenuList } from "../../api/home";
	import { Banner, Goods, Menu } from "../../types/home";
	import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
	import { useFormat, useTabBarBadge, useSetTabBarItem } from '../../hooks/index'

	useTabBarBadge()
	useSetTabBarItem()
	const format = useFormat()


	let count = 1 //接口所需参数
	const limitNum = 10 //接口所需参数

	const bannerList = ref([] as Banner[])// 定义轮播图数组
	const menuList = ref([] as Menu[])// 定义菜单数组
	const goodsList = ref([] as Goods[])

	// 是否开启上拉下拉
	const status = ref<'loading' | 'noMore'>('loading')


	// 获取轮播图数据
	const getBannerListData = async () => {
		const res = await getBannerList()
		bannerList.value = res.data
	}
	getBannerListData()

	// 获取首页菜单数据
	const getMenuListData = async () => {
		const res = await getMenuList()
		menuList.value = res.data
		console.log(menuList.value);
	}
	getMenuListData()

	// 获取商品列表数据
	const getGoodsListData = async () => {
		const res = await getGoodsList({ count, limitNum })
		uni.stopPullDownRefresh()
		if (!res.data.length) return status.value = 'noMore'
		goodsList.value = [...goodsList.value, ...res.data]
	}
	getGoodsListData()

	// 上拉加载更多
	onReachBottom(() => {
		if (status.value === 'noMore') return
		count++
		getGoodsListData()
	})

	// 下拉刷新
	onPullDownRefresh(() => {
		status.value = 'loading'
		count = 1
		goodsList.value = []
		getGoodsListData()
	})

	// 跳转到商品详情页
	const goToDetail = (proid : string) => {
		uni.navigateTo({
			url: `../../subpkg/goodsDetail/goodsDetail?proid=${proid}`
		})
	}
</script>

<style lang="scss" scoped>
	.swiper-list {
		width: 750rpx;
		height: 350rpx;

		swiper-item {
			width: 750rpx;
			height: 350rpx;

			image {
				width: 100%;
				height: 100%
			}
		}
	}



	.grid-list {
		padding-top: 20px;
		box-sizing: border-box;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;

		.grid-item {
			width: 150rpx;
			height: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			justify-content: center;

			image {
				text-align: center;
				margin-left: 24px;
				width: 56rpx;
				height: 56rpx
			}

			text {
				margin-top: 10px;
				font-size: 12px;
				color: #646566
			}
		}
	}

	.goods-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		box-sizing: border-box;
		width: 100%;
		padding-left: 10rpx;
		padding-right: 10rpx;

		.goods-item {
			box-sizing: border-box;
			background-color: #fff;
			padding: 5.33333vw;
			border-radius: 1.33333vw;
			display: flex;
			align-items: center;
			width: 48%;
			flex-direction: column;
			margin-top: 1.33333vw;

			image {
				width: 26.66667vw;
				height: 32vw;
			}

			.title {
				font-size: 3.73333vw;
				display: inline-block;
				white-space: nowrap;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: 4vw;
				color: #000;
			}

			.desc {
				font-size: 3.2vw;
				color: #c3c3c3;
				display: inline-block;
				white-space: nowrap;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: 2.66667vw;
			}

			.price {
				font-size: 3.2vw;
				margin-top: 2.66667vw;
				color: red;
			}
		}
	}

	.footer {
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		color: gray;
		font-size: 14px;
	}
</style>